import React, { useContext } from "react";
import { Layout, Menu, Dropdown, Avatar, Button } from "antd";
import {
    HomeOutlined,
    ShoppingOutlined,
    UnorderedListOutlined,
    SendOutlined,
    UserOutlined,
    TeamOutlined,
    LogoutOutlined,
} from "@ant-design/icons";
import { Outlet, useNavigate } from "react-router-dom";
import { AuthContext } from "../contexts/AuthContext";
import { MODULES } from "../utils/mockData";

const { Header, Sider, Content } = Layout;

const AdminLayout = () => {
    const navigate = useNavigate();
    const { user, logout } = useContext(AuthContext);

    const allMenuItems = [
        { key: "home", icon: <HomeOutlined />, label: "首页", module: null },
        {
            key: "products",
            icon: <ShoppingOutlined />,
            label: "商品管理",
            module: MODULES.PRODUCTS,
        },
        {
            key: "categories",
            icon: <UnorderedListOutlined />,
            label: "分类管理",
            module: MODULES.CATEGORIES,
        },
        {
            key: "orders",
            icon: <SendOutlined />,
            label: "订单管理",
            module: MODULES.ORDERS,
        },
        {
            key: "users",
            icon: <UserOutlined />,
            label: "用户管理",
            module: MODULES.USERS,
        },
        {
            key: "roles",
            icon: <TeamOutlined />,
            label: "角色管理",
            module: MODULES.ROLES,
        },
    ];

    const filteredMenuItems = allMenuItems.filter(
        (item) => !item.module || user?.permissions?.includes(item.module)
    );

    const userDropdown = {
        items: [
            {
                key: "logout",
                icon: <LogoutOutlined />,
                label: "退出登录",
                onClick: logout,
            },
        ],
    };

    return (
        <Layout style={{ minHeight: "100vh" }}>
            <Sider collapsible>
                <div
                    className="logo"
                    style={{
                        height: "32px",
                        margin: "16px",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        color: "#fff",
                        fontSize: 16,
                    }}
                >
                    后台
                </div>
                <Menu
                    theme="dark"
                    mode="inline"
                    items={filteredMenuItems}
                    onClick={({ key }) => navigate(`/${key}`)}
                />
            </Sider>
            <Layout>
                <Header
                    style={{
                        padding: "0 24px",
                        background: "#fff",
                        display: "flex",
                        justifyContent: "flex-end",
                        alignItems: "center",
                    }}
                >
                    <Dropdown menu={userDropdown} placement="bottomRight">
                        <div
                            style={{
                                display: "flex",
                                alignItems: "center",
                                cursor: "pointer",
                            }}
                        >
                            <Avatar icon={<UserOutlined />} />
                            <span style={{ marginLeft: 8 }}>
                                {user?.username}
                            </span>
                        </div>
                    </Dropdown>
                </Header>
                <Content
                    style={{
                        margin: "24px 16px",
                        padding: 24,
                        background: "#fff",
                    }}
                >
                    <Outlet />
                </Content>
            </Layout>
        </Layout>
    );
};

export default AdminLayout;
